<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CClub在线笔试</title>
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        *{
            padding: 0 0px;
            margin: 0 0px;
        }
        .el-header{
            margin-top:80px;
            margin-left:30px;
            border: 1px solid rgb(235,235,235);
            width:1430px;
            height:70px;
        }
        .el-radio_button{
            background-color:#5272ff;
            border:1px solid #ececed;
            font-size:12px;
            width:67px;
            height:32px;
            padding:8px 13px 8px 13px;
        }
        .el-question_button{
            background-color:#fff;
            border:1px solid #ececed;
            font-size:12px;
            width:67px;
            height:32px;
            padding:8px 13px 8px 13px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="margin-left:30px;margin-top:15px;font-size:24px;height:30px;">
        <div style="float:left;">{{name}}</div>
        <div style="float:left;margin-left:1080px;">
            <a href="javascript:void(0);" @click="interview" style="text-decoration:none;color:rgb(30,30,30);font-size:16px;">在线面试</a>
        </div>
        <div style="float:left;margin-left:30px;">
            <el-dropdown placement="bottom-start">
                <span class="el-dropdown-link">{{userInfo.user_company}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item style="background-color:#f6f8ff;">{{userInfo.user_phone}}</el-dropdown-item>
                    <el-dropdown-item disabled style="font-size:12px;">当前公司:</el-dropdown-item>
                    <el-dropdown-item style="font-size:12px;">&nbsp;&nbsp;&nbsp;{{userInfo.user_company}}</el-dropdown-item>
                    <el-dropdown-item >个人中心</el-dropdown-item>
                    <el-dropdown-item divided>
                        <a href="javascript:void(0);" @click="signOut" style="text-decoration:none;color:rgb(30,30,30);">
                            退出登录
                        </a>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
    <el-divider></el-divider>
    <div style="margin-left:30px;margin-top:30px;">
        <div style="float:left;">在线笔试({{tableData.length}})</div>
        <div style="float:left;margin-left:1140px;">
            <el-button type="primary" style="width:60px;" size="small" @click="subject">题库</el-button>
        </div>
        <div style="float:left;margin-left:25px;">
            <el-button type="primary" style="width:120px;" size="small" @click="createExam('all')">新建在线笔试</el-button>
        </div>
    </div>
    <div class="el-header">
        <div style="margin-left:20px;padding-top:20px;float:left;">
            <el-input v-model="input" placeholder="请输入内容" style="width:200px;" size="small"></el-input>
        </div>
        <div style="float:left;margin-left:10px;margin-top:20px;">
            <el-button type="info" size="small" @click="searchByExamName">搜索</el-button>
        </div>
        <div style="float:left;margin-left:20px;margin-top:25px;">
            <span :class="first?'el-radio_button':'el-question_button'" style="border:1px solid #ececed;border-radius:6px 0 0 6px;">
                <a href="javascript:void(0);" @click="switchFirst" :style="{'color':first?'#fff':'#000'}" style="text-decoration:none;">全部</a>
            </span>
            <span :class="second?'el-radio_button':'el-question_button'" style="margin-left:-5px;">
                <a href="javascript:void(0);" @click="switchSecond" :style="{'color':second?'#fff':'#000'}" style="text-decoration:none;">未开始</a>
            </span>
            <span :class="third?'el-radio_button':'el-question_button'" style="margin-left:-5px;">
                <a href="javascript:void(0);" @click="switchThird" :style="{'color':third?'#fff':'#000'}" style="text-decoration:none;">进行中</a>
            </span>
            <span :class="fourth?'el-radio_button':'el-question_button'" style="margin-left:-5px;">
                <a href="javascript:void(0);" @click="switchFourth" :style="{'color':fourth?'#fff':'#000'}" style="text-decoration:none;">已结束</a>
            </span>
        </div>
        <div style="float:left;margin-top:-25px;margin-left:1340px;font-size:13px;color:rgb(139, 143, 148);">{{tempExam.length}}个结果</div>
    </div>
    <div style="margin-left:30px;width:1430px">
        <template>
            <el-table :data="tempExam" style="width: 100%">
                <el-table-column prop="exam_name" label="考试名称" width="180">
                </el-table-column>
                <el-table-column prop="exam_start_time" label="考试时间" width="180">
                </el-table-column>
                <el-table-column prop="" label="状态" width="300">
                    <template scope="scope">
                        <span v-if="scope.row.exam_state===0" style="color:red;">未开始</span>
                        <span v-if="scope.row.exam_state===1" style="color:red;">进行中</span>
                        <span v-if="scope.row.exam_state===2" style="color:red;">已结束</span>
                    </template>
                </el-table-column>
                <el-table-column prop="exam_question_number" label="题目数量" width="300">
                </el-table-column>
                <el-table-column prop="" label="候选人" width="240">
                    <template scope="scope">
                        <el-tag>{{scope.row.exam_user_number}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作">
                    <template scope="scope">
                        <span style="font-size:12px;" v-if="scope.row.exam_state===0">
                            <a href="javascript:void(0);" @click="addSubject(scope.row.exam_id)" style="text-decoration:none;">设置考试规则</a>
                        </span>
                        <span style="font-size:12px;margin-left:15px;" v-if="scope.row.exam_state===0">
                            <a href="javascript:void(0);" @click="addSubject(scope.row.exam_id)" style="text-decoration:none;">编辑题目</a>
                        </span>
                        <span style="font-size:12px;margin-left:15px;">
                            <a href="javascript:void(0);" @click="copyExamOpen(scope.row.exam_id)" style="text-decoration:none;">考试链接</a>
                        </span>
                        <span style="font-size:12px;" v-if="scope.row.exam_state===0">
                            <a href="javascript:void(0);" @click="add_exam_candidate(scope.row.exam_id)" style="text-decoration:none;">添加候选人</a>
                        </span>
                        <span style="font-size:12px;margin-left:25px;">
                            <a href="javascript:void(0);" @click="exam_candidate_list(scope.row.exam_id)" style="text-decoration:none;">候选人列表</a>
                        </span>
                        <span style="font-size:12px;margin-left:15px;">
                            <el-dropdown placement="bottom-start" size="small">
                                <span class="el-dropdown-link">
                                    <a href="javascript:void(0);" style="font-size:12px;text-decoration:none;">更多</a>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <a href="javascript:void(0);" @click="exportCandidate(scope.row.exam_id,scope.row.exam_name)" style="text-decoration:none;color:rgb(60,60,60)">导出候选人</a>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <a href="javascript:void(0);" @click="delExamOpen(scope.row.exam_id)" style="text-decoration:none;color:rgb(60,60,60)">删除</a>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <!--复制笔试链接-->
    <el-dialog title="查看考试地址" :visible.sync="dialogVisible_copy_exam" width="30%" before-close="handleClose" >
        <div style="width:100%;height:1px;background-color:rgb(230,230,230);margin-top:-25px;"></div>
        <div style="font-size:13px;margin-top:10px;">请复制考试地址，发送给候选人</div>
        <div style="margin-top:15px;">
            <span><el-input v-model="exam_address" readonly="readonly" style="width:330px;" size="mini"></el-input></span>
            <span><el-button type="primary" style="width:80px;" size="mini">复制链接</el-button></span>
        </div>
        <div style="margin-top:35px;margin-left:130px;">
            <el-button type="info" @click="dialogVisible_copy_exam = false" style="width:150px;" size="small">取 消</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            name: 'CCLUB 在线笔试',
            userInfo:{
                user_company: '茗少集团',
                user_phone: '18229583486'
            },
            input: '',
            first: true,
            second: false,
            third: false,
            fourth: false,
            tableData: [],
            exam_question:[],
            exam_user: [],
            tempExam: [],
            dialogVisible_copy_exam: false,
            exam_address: ''
        },
        created(){
            this.getMyCreatedExam();
        },
        methods:{
            interview(){
                window.location.href="/ming";
            },
            signOut() {

            },
            switchFirst(){
                this.second=this.third=this.fourth=this.fifth=!(this.first=true);
                this.tempExam=[];
                for(let i=0;i<this.tableData.length;i++){
                    this.tempExam[i]=this.tableData[i];
                }
            },
            switchSecond(){
                this.first=this.third=this.fourth=this.fifth=!(this.second=true);
                this.tempExam=[];
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].exam_state===0){
                        this.tempExam[i]=this.tableData[i];
                    }
                }
            },
            switchThird(){
                this.first=this.second=this.fourth=this.fifth=!(this.third=true);
                this.tempExam=[];
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].exam_state===1){
                        this.tempExam[i]=this.tableData[i];
                    }
                }
            },
            switchFourth(){
                this.first=this.second=this.third=this.fifth=!(this.fourth=true);
                this.tempExam=[];
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].exam_state===2){
                        this.tempExam[i]=this.tableData[i];
                    }
                }
            },
            subject(){
                window.location.href="/test_subject/all";
            },
            createExam(exam_id){
                window.location.href="/test_createWrittenExam/"+exam_id;
            },
            async getMyCreatedExam(){
                let result=await axios.get('/getMyCreatedExam');
                this.tableData=result.data;
                this.tempExam=result.data;
                console.log(this.tableData);
            },
            searchByExamName(){
                this.tempExam=[];
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].exam_name.indexOf(this.input)!=-1){
                        this.tempExam[i]=this.tableData[i];
                    }
                }
            },
            delExamOpen(exam_id){
                this.$confirm('此操作将永久删除该笔试记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteExam(exam_id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            exportCandidate(exam_id,exam_name){
                this.$confirm('此操作将导出该笔试的候选人信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let url="/exportExamUserSheet?exam_id="+exam_id+"&exam_name="+exam_name;
                    window.open(url);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            async deleteExam(exam_id){
                let result=await axios.get('/deleteExamById?exam_id='+exam_id);
                if(result.data===1){
                    this.$message({
                        type: 'success',
                        message: '删除视频面试成功!'
                    });
                }else{
                    this.$message({
                        type: 'info',
                        message: '删除视频面试失败'
                    });
                }
                this.getMyCreatedExam();
            },
            copyExamOpen(exam_id){
                this.exam_address+=("127.0.0.1:8080/test_before_exam_start/"+exam_id);
                this.dialogVisible_copy_exam=true;
            },
            add_exam_candidate(exam_id){
                window.location.href="/test_add_exam_candidate/"+exam_id;
            },
            exam_candidate_list(exam_id){
                window.location.href="/test_exam_candidate_list/"+exam_id;
            },
            addSubject(exam_id){
                window.location.href="/test_addSubject/"+exam_id;
            }
        }
    })
</script>
</html>